<script setup lang="ts">

import {ref} from "vue";
import type {Post} from "@/net/controller/post-controller.ts";
import {deletePost, listPosts, setPostStarStatus, setPostTopStatus} from "@/net/controller/post-controller.ts";
import {Category, getAllCategory} from "@/net/controller/category-controller.ts";
import router from "@/router";
import {showSimpleDialog} from "@/utils/dialog-utils.ts";

const tableData = ref<Post[]>([])
const currentPage = ref(1)
const totalPages = ref(1)

async function refreshData() {
  const res = await listPosts(currentPage.value)
  tableData.value = res.records
  totalPages.value = res.pages
}

const cats = ref<Category[]>([])

async function refreshCats() {
  cats.value = await getAllCategory()

  await refreshData()
}

refreshCats()

async function setPostTop(post: Post) {
  await setPostTopStatus(post.postId, post.isTop != 1)
  await refreshData()
}

async function setPostStar(post: Post) {
  await setPostStarStatus(post.postId, post.isStar != 1)
  await refreshData()
}

function onDelete(post: Post) {
  showSimpleDialog('删除帖子', `是否要删除帖子 ${post.title}`, () => {
    deletePost(post.postId).then(() => {
      ElMessage.success("删除成功")
      refreshData()
    })
  })
}
</script>

<template>
  <main>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="postId" label="帖子ID" width="120" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="userId" label="发布者" width="120" />
      <el-table-column label="分类" width="120">
        <template #default="scope">
          {{ cats.find((e: Category) => e.categoryId == scope.row.categoryId)?.name }}
        </template>
      </el-table-column>
      <el-table-column label="是否置顶" width="80">
        <template #default="scope">
          <span v-if="scope.row.isTop == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="是否精华" width="80">
        <template #default="scope">
          <span v-if="scope.row.isStar == 1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="viewCount" label="阅读量" width="120" />
      <el-table-column prop="createdAt" label="发布时间" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="setPostTop(scope.row)">
            <span v-if="scope.row.isTop == 0">置顶</span>
            <span v-else>取消置顶</span>
          </el-button>

          <el-button link type="primary" size="small" @click="setPostStar(scope.row)">
            <span v-if="scope.row.isStar == 0">精华</span>
            <span v-else>取消精华</span>
          </el-button>

          <el-button link type="primary" size="small" @click="router.push(`/post/${scope.row.postId}`)">
            查看
          </el-button>
          <el-button link type="primary" size="small" @click="router.push(`/manager/posts/editor?mode=edit&postId=${scope.row.postId}`)">
            编辑
          </el-button>
          <el-button link type="danger" size="small" @click="onDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </main>
</template>

<style scoped>

</style>